<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#00CBCB" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
					<scroll-view scroll-y :style="{height: `${scrollHight}px`,width: '100%'}" @scrolltolower="reachBottom">
						<view class="container" v-for="(orderItem, orderIndex) in orderList.data" :key="orderIndex">
							<orderListItem :orderItem="orderItem"/>
						</view>
						<u-empty v-if="orderList.data.length==0 && loadingStatus=='nomore'" mode="list"></u-empty>
						<view class="load-more" v-if="orderList.data.length>0 || loadingStatus!=='nomore'">
							<u-loadmore :status="loadingStatus" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex';
import orderListItem from './components/orderListItem.vue'
export default {
	components:{ orderListItem },
	data() {
		return {
			scrollHight:500,
			condition:{
				orderStatus:''
			},
			list: [
				{
					name: '全部',
					value:''
				},
				{
					name: '待取药',
					value:'2'
				},
				{
					name: '已完成',
					value:'4'
				},
				{
					name:'已取消',
					value:'9'
				}
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0
		};
	},
	onLoad() {
		const that = this;
		//获取屏幕高度及比例
		uni.getSystemInfo({
			success: function (res) {
				that.scrollHight = res.windowHeight-that.CustomBar;
			}
		})
		this.orederList(1)
		this.ActGetAppDictList({
			dictType:'orderStatus',
			isCtr:'0'
		})
	},
	computed: {
		...mapState({
			orderList: state => state.order.orderList,
			loadingStatus: state => state.order.loadingStatus
		})
	},
	methods: {
		...mapActions(['ActOrderList','ActGetAppDictList']),
		async orederList(current){
			await this.ActOrderList({
				...this.condition,
				current:current || this.orderList.current + 1
			})
		},
		reachBottom() {
			if (this.loadingStatus=== 'loadmore') {
				this.orederList();
			}
		},
		// 去订单详情页面
		orderDetails(){
				uni.navigateTo({
						url:'./orderParticulars'
				})
		},
		// tab栏切换
		change(index) {
			console.log("index",index)
			this.swiperCurrent = index;
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	},
	watch:{
		'swiperCurrent'(swiperCurrent){
			this.condition.orderStatus = this.list[swiperCurrent].value
		},
		'condition.orderStatus'(orderStatus){
			this.orederList(1)
		}
	}
};
</script>

<style lang="scss" scoped>
// 自己的样式
.container {
	padding: 0 24rpx;
}
.page-box{
	background-color: #ffffff;
	border-radius: 10rpx;
	margin: 24rpx 0;
	padding: 24rpx;
	.box-top{
		padding-top: 26rpx;
		display: flex;
		// justify-content:space-evenly;
		.box-avatar{
			width: 120rpx;
			image{
				width: 112rpx;
				height: 112rpx;
			}
		}
		.box-center{
			margin-right: auto;
			padding: 0 10px;
			.box-name{
				font-size: 28rpx;
				margin-bottom: 16rpx;
				text{
					margin-right: 8rpx;
				}
			}
			.box-time{
				font-size: 24rpx;
			}
		}
		.box-status{
			font-size: 24rpx;
			color: #0D95FF;
		}
	}
	.box-buttom{
		height: 142rpx;
		background-color:#F6F6F6;
		display: flex;
		align-items: center;
		border-radius: 16rpx;
		padding: 16rpx;
		margin: 24rpx 0 0;
		.box-imgs{
			margin: 0 -16rpx;
			image{
				width: 110rpx;
				height: 110rpx;
				padding: 0 16rpx;
			}
		}
		.box-census{
			text-align: right;
			margin-left: auto;
			padding-right: 16rpx;
			.box-price{
				color: #FF4F39;
				font-size: 30rpx;
				text{
					padding-top: 8rpx;
				}
			}
			.box-quantity{
				color: #333333;
				font-size: 24rpx;
			}
		}

	}
}
.load-more{
	padding: 20rpx 0;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
